import React, {Component} from 'react';
import cs from 'classnames';
import BaseCmpt from '../BaseCmpt';
import './index.css';
import Ajax from '../../common/ajax';

class WaiterList extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 103,
            style: {
                marginBottom: '10px'
            },
            dataset: [],
            data: {
                title: '技师风采',
                storeId: '0'
            },
            layout: 0, //0横向滚动 1.
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            techList: [],
        };
    }

    componentWillReceiveProps(nextProps) {
        const {data: curData} = this.props;
        const {data: nextData} = nextProps;
        var curStoreId, nextStoreId;

        try {
            curStoreId = curData.data.storeId || '0';
            nextStoreId = nextData.data.storeId || '0';

            if (curStoreId != nextStoreId) {
                this._getTechList(nextStoreId);
            }
        } catch (e) {
        }
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {techList} = this.state;
        var {style, dataset, layout, data = {}} = data;
        var {title = '技师风采', showTitle = '', canAppoint = true} = data;

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'waiterListSection cmptEle': true, 'cmptEle_selected': selected})}
                style={style}
            >
                {
                    showTitle != 'hidden' ?
                        <div className="waiterListSection__title">{title}</div>
                        : null
                }
                <div className={["waiterList", layout == 1 ? "waiterList_column" : ""].join(' ')}>
                    {
                        techList && techList.length > 0 ?
                            techList.map(function (item, index) {
                                return (
                                    <div className="waiterItem" key={'waiterItem__' + index}>
                                        <img src={item.head_img} className="waiterItem__img"/>
                                        <div className="waiterItem__info">
                                            <div className="waiterItem__name">{item.name}</div>
                                            <div className="waiterItem__des">{item.title}</div>
                                        </div>
                                    </div>
                                )
                            })
                            :
                            <div className="waiterList__empty">您还没有配置数据哦~</div>
                    }
                </div>
            </div>
        );
    }

    componentDidMount() {
        var storeId;
        try {
            storeId = this.state.data.data.storeId;
        } catch (e) {
        }
        this._getTechList(storeId);
    }

    //获取技师列表
    _getTechList(storeId) {
        var _self = this;

        Ajax.G('/openapi/CTechnician/technicianPage', {
            storeId
        }, function (res) {
            var result = res['result'];

            _self.setState({
                techList: result
            });
        });
    }
}

export default WaiterList;
